<template>
	<view v-show="seen" class="banner" @tap="handleTap" v-bind:style="{ height:realHeight+'px' }">
		<image :src="image"></image>
	</view>
</template>

<script>
	var self;
	export default {
    name:'banner',
		props: {
			image: {
				type: String,
				// default: 'http://via.placeholder.com/300x150'
				default:'',
			},
			height: {
				type: Number,
				default: 300,
			}
		},
		data() {
			return {
				realHeight: 0,
			}
		},
		onLoad: async function (e) {
			self = this;
			await this.getHeight();
			// console.log(this.realHeight)
		},
		computed: {
			seen() {
				// console.log(this.image.length > 0);
				return (this.image.length > 0);
			},
		},
		methods: {
			handleTap() {
				this.$emit('tap');
			},
			async getHeight() {
				await uni.getSystemInfo({
					success: function (res) {
						self.realHeight = Math.round(res.screenWidth / 750.0 * self.height);
						return self.realHeight;
					}
				});
			}
		}
	}
</script>


<style>
	.banner {
		display: flex;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}
</style>
